﻿@using FrogFoot.Resources
@model FrogFoot.Areas.Client.Models.ContactViewModel
@{
    ViewBag.Title = "Contact";
}

@{
    var emailResult = TempData["EmailResult"] as bool?;
}

<h2 class="text-center" style="color: green; margin-bottom: 30px;">Contact us</h2>

<div class="row">
    <div class="col-sm-4">
        @if (emailResult != null)
        {
            <div class="form-group">
                <div class="alert alert-success">Thank you for contacting us. We will respond shortly.</div>
            </div>
            @Html.ActionLink("Home", "Index", "Portal", null, new { @class = "btn btn-success" })

        }
        else
        {
            using (Html.BeginForm("Contact", "Contact", FormMethod.Post))
            {
                <div class="form-group">
                    @Html.LabelFor(m => m.Subject, new { @class = "control-label" })
                    @Html.TextBoxFor(m => m.Subject, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Subject, "", new { @class = "text-danger" })
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.Message, new { @class = "control-label" })
                    @Html.TextAreaFor(m => m.Message, new { @class = "form-control", @cols = 100, @rows = 10 })
                    @Html.ValidationMessageFor(m => m.Message, "", new { @class = "text-danger" })
                </div>

                <input type="submit" value="Send" class="btn btn-success" />
            }
        }
    </div>
    <div class="col-sm-8">
        <div id="map" style="width: 600px; height: 400px"></div>

        <div id="0" class="infoBox" style="display: none;">
            <h3>Frogfoot Johannesburg</h3>
            <p>
                Block D,
                <br />
                Rutherford Estate,
                <br />
                1 Scott Street,
                <br />
                Waverley
            </p>
            <label>Phone:</label> +27 21 448 7225
        </div>

        <div id="1" class="infoBox">
            <h3>Frogfoot Cape Town</h3>
            <p>
                Suite 302,
                <br />
                Building 20,
                <br />
                The Waverley Business Park,
                <br />
                Kotzee Road,
                <br />
                Mowbray
            </p>
            <label>Phone:</label> +27 21 448 7225
        </div>

        <div id="2" class="infoBox" style="display: none;">
            <h3>Frogfoot Pretoria</h3>
            <p>
                Block 16
                <br />
                Boardwalk Office Park
                <br />
                Eros Street
                <br />
                Faerie Glen
            </p>
            <label>Phone:</label> +27 21 448 7225
        </div>

        <div id="3" class="infoBox" style="display: none;">
            <h3>Frogfoot Bloemfontein</h3>
            <p>
                No1, 8th Street
                <br />
                Arboretum
            </p>
            <label>Phone:</label> +27 21 448 7225
        </div>

        <div id="4" class="infoBox" style="display: none;">
            <h3>Frogfoot Port Elizabeth</h3>
            <p>
                Suite 2, 5th Avenue,
                <br />
                Newton Park
            </p>
            <label>Phone:</label> +27 21 448 7225
        </div>

        <div id="5" class="infoBox" style="display: none;">
            <h3>Frogfoot Durban</h3>
            <p>
                Suite 4 Strathway,
                <br />
                Strathmore Park,
                <br />
                305 Musgrave Rd,
                <br />
                Durban            </p>
            <label>Phone:</label> +27 21 448 7225
        </div>
    </div>
</div>

@section scripts
{
    <script src="//maps.google.com/maps/api/js?key=@(Globals.GoogleApiKey)&libraries=places" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var map;

            function InitializeMap() {

                var latlng = new google.maps.LatLng(-29.102314, 26.220063);
                var myOptions =
                {
                    zoom: 5,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: false
                };
                map = new google.maps.Map(document.getElementById("map"), myOptions);
            }

            InitializeMap();

            var locations = [
                [0,"Frogfoot Johannesburg", "-26.1362107", "28.0702908"],
                [1,"Frogfoot Cape Town", "-33.942507", "18.472060"],
                [2,"Frogfoot Pretoria", "-25.800492", " 28.325948"],
                [3,"Frogfoot Bloemfontein", "-29.102314", "26.220063"],
                [4,"Frogfoot Port Elizabeth", "-33.945701", "25.5627329"],
                [5,"Frogfoot Durban", "-29.844864", "31.0019655"]
            ];

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][1]);
                        infowindow.open(map, marker);
                        $('.infoBox').hide();
                        $('#' + locations[i][0] + '.infoBox').show();
                    }
                })(marker, i));
            }
        })
    </script>
}
